<template>
  <div>
    <!-- 添加轮播图按钮 -->
    <el-button type="primary" @click="$router.push({ name: 'addswiper' })">
      添加轮播图
      <el-icon><Plus /></el-icon>
    </el-button>
    <el-table :data="currentswiperdata" style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <span style="margin-left: 10px">{{
              (currentPage - 1) * pageSize + scope.$index + 1
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-image
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              :alt="scope.row.alt"
              :z-index="100"
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="链接" align="center">
        <template #default="scope">
          <span>{{ scope.row.link }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提示" align="center">
        <template #default="scope">
          <span>{{ scope.row.alt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Operations" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="swiperData.length"
      v-model:current-page="currentPage"
      :default-page-size="1"
    />
  </div>
</template>

<script>
// 引入图标组件
import { Plus } from '@element-plus/icons-vue'
import { getswiperlistFn, delswiperFn } from '@/utils/swiper'
export default {
  name: '',
  data() {
    return {
      swiperData: [], // 轮播图数据数组
      currentPage: 1, // 当前页
      pageSize: 1 // 每页数据条数
    }
  },
  components: {
    Plus
  },
  computed: {
    // 获取当前页的数据
    currentswiperdata() {
      return this.swiperData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  mounted() {
    // 获取轮播图数组
    this.getlist()
  },
  methods: {
    // 获取轮播图列表
    getlist() {
      getswiperlistFn().then((res) => {
        console.log('轮播图数据', res)
        if (res.data.code == 200) {
          this.swiperData = res.data.data
        }
      })
    },
    async handleDelete(index, row) {
      // 删除当前该条数据
      // delswiperFn({ bannerid: row.bannerid }).then((res) => {})
      let result = await delswiperFn({ bannerid: row.bannerid })
      console.log('result', result)
      if (result.data.code == 200) {
        // 重新渲染列表
        this.getlist()
      }
    }
  }
}
</script>
<style scoped>
</style>